<template>
  <div class="ly-box" id="index-content">

    <div class="ly-info-wrap">

    <div class="ly-house" @click="chooseHouse">
      <div class="icon-address"></div>
      <div class="house-name">{{house}}</div>
    </div>
    <yd-tab v-model="tab">
      <yd-tab-panel>
        <div class="tab-item service">
          <div class="item-img" :style="{backgroundImage: 'url(' + service.img + ')'}"></div>
          <div class="item-boxs">
            <div class="boxs-item" v-for="(item,index) in service.boxs" :key="index">
              <div @click="getAuthCode(item.url)">
                <i :class="item.icon" :style="{'color':item.color}"></i>
                <p>{{item.name}}</p>
              </div>
            </div>
            <!--<div class="boxs-item">-->
            <!--<div @click="goPropertyPay()">-->
            <!--<i class="iconfont icon-xiuliweihu" style="color: rgb(247, 183, 78)"></i>-->
            <!--<p>vue缴费</p>-->
            <!--</div>-->
            <!--</div>-->
            <!--<div class="boxs-item">-->
            <!--<div @click="goRepair()">-->
            <!--<i class="iconfont icon-repair01" style="color: rgb(247, 183, 78)"></i>-->
            <!--<p>vue报修</p>-->
            <!--</div>-->
            <!--</div>-->
            <!--<div class="boxs-item">-->
            <!--<div @click="goAdvise()">-->
            <!--<i class="iconfont icon-account-alert" style="color: rgb(6, 164, 128);"></i>-->
            <!--<p>vue投诉</p>-->
            <!--</div>-->
            <!--</div>-->
            <!--<div class="boxs-item">-->
            <!--<div @click="goUser()">-->
            <!--<i class="iconfont icon-icon35" style="color: rgb(0, 149, 255);"></i>-->
            <!--<p>vue个人</p>-->
            <!--</div>-->
            <!--</div>-->
          </div>
        </div>
      </yd-tab-panel>
      <yd-tab-panel>
        <div class="tab-item life">
          <div class="item-img" :style="{backgroundImage: 'url(' + life.img + ')'}"></div>
          <div class="item-boxs">
            <div class="boxs-item" v-for="(item,index) in life.boxs" :key="index">
              <div @click="getAuthCode(item.url)">
                <!--<yd-icon :name="item.icon" size=".6rem" :color="item.color"></yd-icon>-->
                <i :class="item.icon" :style="{'color':item.color}"></i>
                <p>{{item.name}}</p>
              </div>
            </div>
          </div>
        </div>
      </yd-tab-panel>
    </yd-tab>
    </div>
    <div class="bottom-nav">
      <yd-tabbar fixed active-color="#ff2843" style="padding:4px 0;border-top: 1px solid #e8e8e8;">
        <yd-tabbar-item title="服务" @click.native="chooseOne" :active="tabOne">
          <yd-icon name="home" slot="icon" size="0.54rem"></yd-icon>
        </yd-tabbar-item>
        <yd-tabbar-item title="社区" @click.native="chooseTwo" :active="tabTwo">
          <yd-icon name="ucenter" slot="icon" size="0.54rem"></yd-icon>
        </yd-tabbar-item>
      </yd-tabbar>
    </div>

    <yd-popup id="popup" v-model="showPop" position="center" width="86%">
      <div class="pop-info">
        <div class="pop-head">请选择默认小区</div>
        <div class="pop-body">
          <yd-cell-group>
            <yd-cell-item v-for="house in housings" :key="house.id" @click.native="handleChoose(house.id,house)">
              <span slot="left">{{house.name}}</span>
              <span slot="right" class="ly-choose"><i :class="{'active': house.id == active}"></i></span>
            </yd-cell-item>
          </yd-cell-group>
        </div>
        <div style="text-align: center;" class="pop-foot">
          <yd-button type="disabled" @click.native="showPop = false">取消</yd-button>
          <yd-button type="primary" @click.native="handleSure(house)">确认</yd-button>
        </div>
      </div>
    </yd-popup>

  </div>
</template>

<script>
  import http from "@/http";
  import storage from "../store/storage.js";

  export default {
    data() {
      return {
        showPop: false,
        house: '',
        dfHouse: '',
        tab: 0,
        tabTwo: false,
        tabOne: true,
        housings: [],
        service: {},
        life: {},
        active: '',
      };
    },
    created: function () {
      // this.save();
      this.init();
    },
    methods: {
      chooseHouse: function () {
        this.showPop = true;
      },
      handleSure: function () {
        this.house = this.dfHouse.name;
        storage.put("housingId", this.dfHouse, 'local');
        storage.put("housingId", this.dfHouse);
        this.showPop = false;
      },
      chooseOne: function () {
        this.tab = 0;
        this.tabOne = true;
        this.tabTwo = false;
      },
      chooseTwo: function () {
        this.tab = 1;
        this.tabOne = false;
        this.tabTwo = true;
      },
      // 请求数据
      init: function () {
        let params = {};
        params.appId = storage.get("appId", 'local');
        http.post("/common/getIcon", params).then(res => {

          const hasHouse = storage.get("housingId", 'local');
          if (res.data.housings && res.data.housings.length > 0) {
            this.house = res.data.housings[0].name;
            this.active = res.data.housings[0].id;
            this.dfHouse = res.data.housings[0]
            storage.put("housingId", res.data.housings[0]);
          }

          //如果缓存里面有了房间信息则用缓存信息
          if (hasHouse) {
            this.house = storage.getObj("housingId", 'local').name;
            this.active = storage.getObj("housingId", 'local').id;
            this.dfHouse = storage.getObj("housingId", 'local')
          }

          this.housings = res.data.housings;

          this.service = res.data.tab1;

          this.service.boxs.push({
            name: "个人中心",
            icon: "iconfont icon-icon35",
            color: "#00DDFF",
            typeInt: "1",
            url: location.protocol + "//" + location.host + "/user/info",
          });
          this.life = res.data.tab2;
        });
      },
      getAuthCode: function (url) {
        if ('' != url && null != url) {
          window.location.href = url;
        } else {
          this.$dialog.toast({
            mes: '请联系管理员开通功能',
            timeout: 1500,
            icon: 'error',
          });
        }
      },
      handleChoose: function (id, dfHouse) {
        this.active = id;
        this.dfHouse = dfHouse;
      },
      goPropertyPay: function () {
        this.$router.push("/propertyPay/bill");
      },
      goRepair: function () {
        this.$router.push("/repair/info");
      },
      goAdvise: function () {
        this.$router.push("/advise/info");
      },
      goUser: function () {
        this.$router.push("/user/info");
      }
    }
  };
</script>

<style>
  @import "../assets/font/iconfont.css";

  body {
    background: #fff;
  }
</style>

<style lang="scss">
  #index-content .yd-popup-content {
    max-height: 450px;
  }
</style>

<style scoped lang="scss">
  .ly-box {
    width: 100%;
    min-height: 10.06rem;

  }
.ly-info-wrap{
  padding-bottom: 1.2rem;
}
  .ly-choose i {
    width: 0.36rem;
    height: 0.36rem;
    border: 1px solid #ccc;
    border-radius: 2px;
    display: inline-block;
    position: relative;
    z-index: 10;
    vertical-align: bottom;
    pointer-events: none;
    color: rgb(76, 216, 100);

  }

  .active {
    background-image: url(../assets/select.png);
    background-color: currentColor;
    border-color: currentColor;
    background-size: 0.26rem;
    background-repeat: no-repeat;
    background-position: center;
  }

  .ly-house {
    width: auto;
    height: 0.5rem;
    position: fixed;
    z-index: 99;
    left: 50%;
    margin-left: -3.5rem;
    top: 0.2rem;
    display: flex;
    .icon-address {
      width: 0.5rem;
      height: 0.5rem;
      background: url(../assets/address.png) no-repeat center;
      background-size: contain;
    }
    .house-name {
      flex: 1;
      line-height: 0.56rem;
      color: #fff;
      padding: 0 0.1rem;
      /*background: #c9c9c9;*/
      border-radius: 4px;
    }
  }

  .tab-item {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    .item-img {
      width: 100%;
      height: 3.5rem;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
    }
    .item-boxs {
      width: 100%;
      height: auto;
      border-left: 1px solid #dfdfdf;
      border-right: 1px solid #dfdfdf;
      .boxs-item {
        width: 33.33%;
        height: 2rem;
        display: inline-block;
        text-align: center;
        border-bottom: 1px solid #dfdfdf;
        border-right: 1px solid #dfdfdf;
        outline: none;
        box-sizing: border-box;
        i {
          display: block;
          margin-top: 0.4rem;
          height: 0.6rem;
          font-size: 0.6rem;
        }
        p {
          line-height: 0.64rem;
          font-size: 0.28rem;
          color: #717171;
        }
      }
      .boxs-item:nth-child(3n) {
        border-right: none;
      }
    }
  }

  .pop-info {
    padding: 0.2rem;
    border-radius: 4px;
    background: #fff;
    .pop-head {
      color: #222;
      text-align: center;
      font-size: 0.3rem;
    }
    .pop-body{
      width: 100%;
      height: 4rem;
      overflow: scroll;
    }
  }

</style>
